<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { useChunksUpload } from '@/hooks/useChunksUpload';
import { generateSeriaNumber } from '@/utils/generateSeriaNumber';
import { resourcesMaterialManageApi } from '@/api/zyApi';
import { ref, reactive } from "vue";

const dialogVisible = ref(false);
const formRef = ref<FormInstance>();
const emit = defineEmits(["success"]);

const props = defineProps<{
    editId?: string
    editName?: string
}>();


interface FormData {
    fid: string
}

const formdata = ref<FormData>({
    fid: ''
})
const isUploading = ref(false);
const uploadPercentage = ref(0);
const uploadFilename = ref('');
defineExpose({
    open: () => {
        dialogVisible.value = true;
    }
})
const rules = reactive<FormRules<FormData>>({
    fid: [
        { required: true, message: '请上传文件', trigger: 'blur' },
    ],
})

// 处理文件上传
const handleUpload = (file: File) => {
    //resourcesResourcesApi.ChunksUpload
    const fid = `res-mr-${new Date().getTime()}${generateSeriaNumber()}`;
    const upload = useChunksUpload();
    isUploading.value = true;
    uploadFilename.value = file.name;
    upload.Upload(fid, 0, {
        file: file,
        onError: (err) => {
            console.log(err);
            isUploading.value = false;
        },
        onProgress: (pr) => {
            console.log(pr);
            uploadPercentage.value = pr.percent;
        },
        onSuccess: () => {
            console.log("上传完成");
            isUploading.value = false;
            formdata.value.fid = fid;
        }
    })
    return false;
};
// 处理点击OK
const handleOk = () => {
    formRef.value?.validate((valid) => {
        if (!valid) return;
        resourcesMaterialManageApi.Edit(props.editId ?? "", {
            FileId: formdata.value.fid,
            Name: props.editName ?? '',
        }).then(() => {
            emit("success");
            dialogVisible.value = false;
            formRef.value?.resetFields();
            uploadPercentage.value = 0;
        })
    });
};

</script>
<template>
    <div v-bind="$attrs">
        <el-dialog align-center v-model="dialogVisible" title="编辑素材" width="25%">
            <el-form ref="formRef" :model="formdata" :label-width="80" :rules="rules">
                <el-form-item label="文件" prop="fid">
                    <div>
                        <el-upload accept=".jpg,.png,.gif,.mp4" :before-upload="handleUpload">
                            <el-button type="primary">上传文件</el-button>
                            <div style="margin-left: 5px;">
                                <span v-if="uploadPercentage > 0">{{ uploadFilename }}</span>
                                <el-progress style="width: 100%;" v-if="uploadPercentage > 0 && uploadPercentage < 100"
                                    :percentage="uploadPercentage" :stroke-width="15" status="success" striped striped-flow
                                    :duration="10" />
                                <div v-if="uploadPercentage >= 100">上传完成</div>
                            </div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    支持 jpg/png/mp4 等文件.
                                </div>
                            </template>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="handleOk">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss"></style>
